import React, { useEffect, useState } from 'react';
import * as service from '../../../api/Statistics'
import { SearchOutlined } from '@ant-design/icons';
import './Style/DataTag.scss'
import { DatePicker, Space, Table, Button, Select, Card } from 'antd';
import { Column } from '@ant-design/plots';
import ExportJsonExcel from "js-export-excel"


interface Props {

}

const { RangePicker } = DatePicker;
function StatTag(props: Props) {
    const [loading, setLoading] = useState(false);
    const [listerone, setListerone] = useState([])
    const [listertwo, setListertwo] = useState([])
    const [listerthree, setListerthree] = useState([])
    const [data, setData] = useState([]);

    useEffect(() => {
        setLoading(true);

        // 居民标签数量统计 
        service.databq().then((res) => {
            console.log(res);
            setData(res.data.data)
            setLoading(false);
        })
        service.optionlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.mechanismName, label: item.mechanismName }
            })
            setListerone(arr)
        })

        service.teamlist().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.teamName, label: item.teamName }
            })
            setListertwo(arr)
        })

        service.teamlistwo().then((res) => {
            // console.log(res);
            var arr = res.data.data.map((item: any) => {
                return { value: item.doctorName, label: item.doctorName }
            })
            setListerthree(arr)
        })
    }, [])
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
   
    //点击搜索
    const handle = () => {
        // console.log(value);
        service.tagDateSearch({  }).then((res) => {
            console.log(res)
            setData(res.data.data)
        })
    };
    const columns = [
        {
            title: '序号',
            render: (_: any, record: never) => <a>{data.indexOf(record) + 1}</a>,//动态渲染标签/组件
            key:'num'

        },
        {
            title: '标签',
            dataIndex: 'tag',
            key: 'tag',
        },
        {
            title: '人次',
            dataIndex: 'value',
            key: 'value',
        },
        
    
        {
            title: '占总人数比例',
            key: 'prc',
            render: (_: any, record: any) => Number(record.prc * 100).toFixed(2)+'%'

        }
    ]


    const config = {
        data,
        height: 200,
        isStack: true,
        xField: 'tag',
        yField: 'value',
        // seriesField: 'dates',
        lable: {
            position: 'middle',
        },
        minColumnWidth: 30,
        maxColumnWidth: 30,
        columnBackground: {
            style: {
                fill: 'rgba(0,0,0,0.1)',
            },
        },
        meta: {
            value: {
                alias: '总数',
            },
        },
    };
  // 导出    

  let excel = () => {//导出Excel表
    let sheetFilter = ["tag", "value", ]//需要导出的属性，一般列表数据的属性
    let option = { fileName: "", datas: [{}] };
    option.fileName = "居民标签";
    option.datas = [
        {
            sheetData: data,//需要导出的数据
            sheetName: "居民标签",
            sheetFilter: sheetFilter,
            sheetHeader: ["标签", "人次",],//每一列的列头
            columnWidth: [20, 20, 20, 20],//每一列的宽
        }
    ]
    let toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
}
    return (
        <div className='data-tag' style={{ padding: 20 }}>
            <div className='title'>居民标签统计</div>

            <div className='top'>
                <div className='padding'>
                    <span>机构</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="全部"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerone
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生团队</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listertwo
                        }
                    />
                </div>
                <div className='padding'>
                    <span>医生</span>&nbsp;&nbsp;
                    <Select
                        defaultValue="请选择"
                        style={{ width: 160 }}
                        onChange={handleChange}
                        options={
                            listerthree
                        }
                    />
                </div>
                <Button type="primary" icon={<SearchOutlined />} onClick={() => { handle()}}>
                    搜索
                </Button>
            </div>
            <div style={{ padding: "0 100px" }}>
                <Card title="居民标签数量统计" bordered={false}>
                    <Column {...config} />
                </Card>
            </div>
            <Button  onClick={() => { excel() }} style={{ float: 'right', margin: '10px 0' }}>导出</Button>
            <Table columns={columns} dataSource={data} loading={loading} rowKey={(row: any) => row.id}
            />

        </div>
    );
}
export default StatTag;